<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <script src="../src/colorpicker.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <main class="main">
      <!-- 侧导航栏 - start -->
      <nav class="sidebar">
        <h2>目录</h2>
        <ul class="sidebar-main">
          <li class="active"><a href="#parameters">基础参数</a></li>
          <li><a href="#init-config">初始化配置</a></li>
          <li><a href="#attr-config">初始化配置</a></li>
        </ul>
      </nav>
      <!-- 侧导航栏 - end -->
      <fieldset class="fieldset-group">
        <legend><a id="parameters">基础参数</a></legend>
        <table class="custom-table">
          <thead>
            <tr>
              <th>参数</th>
              <th>说明</th>
              <th>类型</th>
              <th>默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>elem</td>
              <td>指向容器选择器（必选项）</td>
              <td>String/Element</td>
              <td></td>
            </tr>
            <tr>
              <td>color</td>
              <td>默认颜色，支持 <code>HEX</code>、<code>RGB</code> 和 <code>RGBA</code></td>
              <td>String</td>
              <td>#FF0000</td>
            </tr>
            <tr>
              <td>alpha</td>
              <td>是否开启透明度，不开启透明度则不会显示透明度选择器且透明度值为 <code>1</code></td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
            <tr>
              <td>predefine</td>
              <td>是否开启预定义颜色</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
            <tr>
              <td>colors</td>
              <td>预定义颜色集，当 <code>predefine</code> 为 <code>true</code> 时才生效</td>
              <td>Array</td>
              <td>空数组</td>
            </tr>
            <tr>
              <td>format</td>
              <td>颜色显示/输出格式，支持 <code>HEX</code>、<code>RGB</code> 和 <code>RGBA</code>。当开启透明度时，自动转为 <code>RGBA</code> 格式</td>
              <td>String</td>
              <td>hex</td>
            </tr>
            <tr>
              <td>zIndex</td>
              <td>选择器面板根节点的 <code>z-index</code> 属性</td>
              <td>Integer</td>
              <td>666</td>
            </tr>
            <tr>
              <td>change</td>
              <td>颜色改变回调</td>
              <td>Function</td>
              <td></td>
            </tr>
            <tr>
              <td>done</td>
              <td>颜色选择回调</td>
              <td>Function</td>
              <td></td>
            </tr>
            <tr>
              <td><strong>备注</strong></td>
              <td colspan="3"><strong>HEX：十六进制的颜色，例如：<code>#FF0000</code>。当前不支持颜色名称。</strong></td>
            </tr>
          </tbody>
        </table>
      </fieldset>
      <fieldset class="fieldset-group">
        <legend><a id="init-config" href="#" target="_blank">初始化配置参数</a></legend>
        <pre>
&lt;button type="button" id="btn"&gt;btn&lt;/button&gt;

&lt;script src="./colorpicker.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

  let btn = document.querySelector('#btn');
  
  let cp = new colorpicker({
    
    // 设置指向容器选择器
    elem: '#btn',
    
    // 设置默认颜色
    color: '#FF0',
    
    // 开启预定义颜色
    predefine: true,
    
    // 设置预定义颜色（与 predefine 配套使用，predefine 为 true 才会生效）
    colors: ['#FF0000', '#DCDCDC', '#5FB878', '#009688', '#393D49', '#FFB800', '#FF5722', '#01AAED'],
    
    // 设置选择器根节点的 z-index 属性
    zIndex: 1024,
    
    // 设置颜色显示/输出格式
    format: 'hex',
    
    // 设置颜色改变回调
    change: color => {
      tx.style.color = color;
      tx.style.borderColor = color;
    },
    
    // 设置颜色选择回调
    done: color => tx.value = color,
  });
  
  // 创建
  cp.render();
  
&lt;/script&gt;
        </pre>
      </fieldset>
      <fieldset class="fieldset-group">
        <legend><a id="attr-config" href="#" target="_blank">实例化对象属性配置参数</a></legend>
        <pre>
&lt;button type="button" id="btn"&gt;btn&lt;/button&gt;

&lt;script src="./colorpicker.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
  
  let btn = document.querySelector('#btn');
  
  let cp = new colorpicker();
  
  // 设置指向容器选择器
  // cp.elem = '#btn';
  cp.elem = btn;
  
  // 设置默认颜色
  cp.color = '#FF0000';
  
  // 开启透明度
  cp.alpha = true;
  
  // 开启预定义颜色
  cp.predefine = true;
  
  // 设置预定义颜色（与 predefine 配套使用，predefine 为 true 才会生效）
  cp.colors = ['#FF0000', '#DCDCDC', '#5FB878', '#009688', '#393D49', '#FFB800', '#FF5722', '#01AAED'];
  
  // 设置选择器根节点的 z-index 属性
  cp.zIndex = 1024;
  
  // 设置颜色显示/输出格式
  // cp.format = 'hex';
  // cp.format = 'rgb';
  cp.format = 'rgba';
  
  // 设置颜色改变回调
  cp.change = color => console.log(color);
  
  // 设置颜色选择回调
  cp.done = color => console.log(color);
  
  // 创建
  cp.render();
  
&lt;/script&gt;
        </pre>
      </fieldset>
    </main>
  </body>
</html>
